<template>
    <div>
        <div class="left"><img src="/static/Exhibition_img/radian.png" /></div>
        <div id="map"></div>
        <div id="map1"></div>
        <div id="map2"></div>
        <div id="map3"></div>
    </div>
</template>

<script>
export default {
    name: 'smallMap',
    data() {
        return {
            bbb: '',
            updata: '',
            changeMap:'',
            bounds: [
                [109.48660019064262, 18.26841373957716], // Southwest
                [109.48881615176441, 18.270578926294355],
            ], // Northeast
            
        }
    },
    props: ['transPosition','mapFlag'],
    mounted() {
        this.initmap()
    },
    methods: {
        initmap(n) {
            // mapboxgl.accessToken = 'pk.eyJ1Ijoic3g4NTQ5NjUxODUiLCJhIjoiY2toYnA4aHk2MHNjMzJwazQ0c2hnb2Y1dSJ9.tx6xx7jLEKAAwdTGLhsenQ';
            // var map = new mapboxgl.Map({
            // container: 'map',
            // style: 'mapbox://styles/sx854965185/ckhzmu4c31h641alu10s862w4',
            // center: [109.48750966865695,18.269294359985494], // 起始位置 109.60827578376235,18.30866679535378,0
            // zoom: 16, // 开始的缩放倍数
            // // maxBounds: this.bounds
            // });
            var _this = this

            if(n==99 || n==null){
                window.map = new mapboxgl.Map({
                container: 'map',
                style: {
                    version: 8,
                    sources: {
                        'raster-tiles': {
                            // "attribution": attribution,
                            type: 'raster',
                            tiles:[window._CONFIG['serveUrl'] +':8090/iserver/services/map-DaoHangXiaoTu/rest/maps/导航小图_经纬度@小图/zxyTileImage.png?z={z}&x={x}&y={y}'],
                            tileSize: 256,
                        },
                    },
                    layers: [
                        {
                            id: 'simple-tiles',
                            type: 'raster',
                            source: 'raster-tiles',
                            // minzoom: 0,
                            // maxzoom: 22,
                        },
                    ],
                },
                center: [109.48745494019622, 18.269371823490587],
                zoom: 14,
                pitch: 0,
                // bearing: 50,
                maxBounds: _this.bounds,
            })
            }else if(n==1){
                window.map = new mapboxgl.Map({
                    container: 'map',
                    style: {
                        version: 8,
                        sources: {
                            'raster-tiles': {
                                // "attribution": attribution,
                                type: 'raster',
                                tiles: [
                                    window._CONFIG['serveUrl'] +':8090/iserver/services/map-GeCengDaoHang-2/rest/maps/一层@室内导航/zxyTileImage.png?z={z}&x={x}&y={y}',
                                ],
                                tileSize: 256,
                            },
                        },
                        layers: [
                            {
                                id: 'simple-tiles',
                                type: 'raster',
                                source: 'raster-tiles',
                            },
                        ],
                    },
                    center: [109.48787651872523,18.269449735823923],
                    zoom: 19.7,
                    pitch: 0,
                })
            }else if(n==2){
                window.map = new mapboxgl.Map({
                    container: 'map',
                    style: {
                        version: 8,
                        sources: {
                            'raster-tiles': {
                                // "attribution": attribution,
                                type: 'raster',
                                tiles: [
                                    window._CONFIG['serveUrl'] +':8090/iserver/services/map-GeCengDaoHang-2/rest/maps/二层@室内导航/zxyTileImage.png?z={z}&x={x}&y={y}',
                                    ],
                                tileSize: 256,
                            },
                        },
                        layers: [
                            {
                                id: 'simple-tiles',
                                type: 'raster',
                                source: 'raster-tiles',
                            },
                        ],
                    },
                    center: [109.48787651872523,18.269449735823923],
                    zoom: 19.7,
                    pitch: 0,
                })
            }else if(n==3){
                window.map = new mapboxgl.Map({
                    container: 'map',
                    style: {
                        version: 8,
                        sources: {
                            'raster-tiles': {
                                // "attribution": attribution,
                                type: 'raster',
                                tiles: [
                                    window._CONFIG['serveUrl'] +':8090/iserver/services/map-GeCengDaoHang-2/rest/maps/三层@室内导航/zxyTileImage.png?z={z}&x={x}&y={y}',],
                                tileSize: 256,
                            },
                        },
                        layers: [
                            {
                                id: 'simple-tiles',
                                type: 'raster',
                                source: 'raster-tiles',
                            },
                        ],
                    },
                    center: [109.48787651872523,18.269449735823923],
                    zoom: 19.7,
                    pitch: 0,
                })
            }
            
            

            var nav = new mapboxgl.NavigationControl({
                //是否显示指南针，默认为true
                showCompass: true,
                //是否显示缩放按钮，默认为true
                showZoom: false,
            })
            //添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
            window.map.addControl(nav, 'top-left')

            
            window.map.on('load', function () {
                window.map.addSource('geojson', _this.createDot([109.48748, 18.26930249]))
                window.map.loadImage('/static/img/newyellow.png', function (error, image) {
                    if (error) throw error
                    window.map.addImage('point', image)
                    window.map.addLayer({
                        id: 'points',
                        type: 'symbol',
                        source: 'geojson',
                        layout: {
                            'icon-image': 'point',
                            'icon-size': 0.2,
                        },
                    })
                })
            })
            // 更新位置的方法
            this.updata = function () {
                let data = this.createDot([this.transPosition[0], this.transPosition[1]]).data
                console.log(data)
                if (window.map.getSource('geojson')) {
                    window.map.getSource('geojson').setData(data)
                }
                window.map.rotateTo(((this.transPosition[2] * 180) / 3.1415926 - 90) % 360, { duration: 0 })
            }

        },
        // initmap1() {
        //     var map = new mapboxgl.Map({
        //         container: 'map',
        //         style: {
        //             version: 8,
        //             sources: {
        //                 'raster-tiles': {
        //                     // "attribution": attribution,
        //                     type: 'raster',
        //                     tiles: [
        //                         window._CONFIG['serveUrl'] +
        //                             ':8090/iserver/services/map-GeCengDaoHang-2/rest/maps/一层@室内导航/zxyTileImage.png?z={z}&x={x}&y={y}',
        //                     ],
        //                     tileSize: 256,
        //                 },
        //             },
        //             layers: [
        //                 {
        //                     id: 'simple-tiles',
        //                     type: 'raster',
        //                     source: 'raster-tiles',
        //                 },
        //             ],
        //         },
        //         center: [109.48787651872523,18.269449735823923],
        //         zoom: 19.7,
        //         pitch: 0,
        //         // bearing: 50,
        //         // maxBounds: this.bounds,
        //     })

        //     var nav = new mapboxgl.NavigationControl({
        //         //是否显示指南针，默认为true
        //         showCompass: true,
        //         //是否显示缩放按钮，默认为true
        //         showZoom: false,
        //     })

        //     var _this = this
        //     map.on('load', function () {
        //         map.addSource('geojson', _this.createDot([109.48748, 18.26930249]))
        //         map.loadImage('/static/img/newyellow.png', function (error, image) {
        //             if (error) throw error
        //             map.addImage('point1', image)
        //             map.addLayer({
        //                 id: 'points',
        //                 type: 'symbol',
        //                 source: 'geojson',
        //                 layout: {
        //                     'icon-image': 'point1',
        //                     'icon-size': 0.2,
        //                 },
        //             })
        //         })
        //     })
        //     // 更新位置的方法
        //     this.updata = function () {
        //         let data = this.createDot([this.transPosition[0], this.transPosition[1]]).data
        //         // console.log(map.getSource('geojson'))
        //         if (map.getSource('geojson')) {
        //             map.getSource('geojson').setData(data)
        //         }
        //         // map.bearing = 100
        //         map.rotateTo(((this.transPosition[2] * 180) / 3.1415926 - 90) % 360, { duration: 0 })
        //         // map.flyTo(this.transPosition[0],this.transPosition[1])
        //     }
        // },
        // initmap2() {
        //     var map = new mapboxgl.Map({
        //         container: 'map',
        //         style: {
        //             version: 8,
        //             sources: {
        //                 'raster-tiles': {
        //                     // "attribution": attribution,
        //                     type: 'raster',
        //                     tiles: [
        //                         window._CONFIG['serveUrl'] +
        //                             ':8090/iserver/services/map-GeCengDaoHang-2/rest/maps/二层@室内导航/zxyTileImage.png?z={z}&x={x}&y={y}',
        //                     ],
        //                     tileSize: 256,
        //                 },
        //             },
        //             layers: [
        //                 {
        //                     id: 'simple-tiles',
        //                     type: 'raster',
        //                     source: 'raster-tiles',
        //                 },
        //             ],
        //         },
        //         center: [109.48787651872523,18.269449735823923],
        //         zoom: 19.7,
        //         pitch: 0,
        //     })

        //     var nav = new mapboxgl.NavigationControl({
        //         //是否显示指南针，默认为true
        //         showCompass: true,
        //         //是否显示缩放按钮，默认为true
        //         showZoom: false,
        //     })

        //     var _this = this
        //     map.on('load', function () {
        //         map.addSource('geojson', _this.createDot([109.48748, 18.26930249]))
        //         map.loadImage('/static/img/newyellow.png', function (error, image) {
        //             if (error) throw error
        //             map.addImage('point1', image)
        //             map.addLayer({
        //                 id: 'points',
        //                 type: 'symbol',
        //                 source: 'geojson',
        //                 layout: {
        //                     'icon-image': 'point1',
        //                     'icon-size': 0.2,
        //                 },
        //             })
        //         })
        //     })
        //     // 更新位置的方法
        //     this.updata = function () {
        //         let data = this.createDot([this.transPosition[0], this.transPosition[1]]).data
        //         // console.log(map.getSource('geojson'))
        //         if (map.getSource('geojson')) {
        //             map.getSource('geojson').setData(data)
        //         }
        //         // map.bearing = 100
        //         map.rotateTo(((this.transPosition[2] * 180) / 3.1415926 - 90) % 360, { duration: 0 })
        //         // map.flyTo(this.transPosition[0],this.transPosition[1])
        //     }
        // },
        // initmap3() {
        //     var map = new mapboxgl.Map({
        //         container: 'map',
        //         style: {
        //             version: 8,
        //             sources: {
        //                 'raster-tiles': {
        //                     // "attribution": attribution,
        //                     type: 'raster',
        //                     tiles: [
        //                         window._CONFIG['serveUrl'] +
        //                             ':8090/iserver/services/map-GeCengDaoHang-2/rest/maps/三层@室内导航/zxyTileImage.png?z={z}&x={x}&y={y}',
        //                     ],
        //                     tileSize: 256,
        //                 },
        //             },
        //             layers: [
        //                 {
        //                     id: 'simple-tiles',
        //                     type: 'raster',
        //                     source: 'raster-tiles',
        //                 },
        //             ],
        //         },
        //         center: [109.48787651872523,18.269449735823923],
        //         zoom: 19.7,
        //         pitch: 0,
        //     })

        //     var nav = new mapboxgl.NavigationControl({
        //         //是否显示指南针，默认为true
        //         showCompass: true,
        //         //是否显示缩放按钮，默认为true
        //         showZoom: false,
        //     })

        //     var _this = this
        //     map.on('load', function () {
        //         map.addSource('geojson', _this.createDot([109.48748, 18.26930249]))
        //         map.loadImage('/static/img/newyellow.png', function (error, image) {
        //             if (error) throw error
        //             map.addImage('point1', image)
        //             map.addLayer({
        //                 id: 'points',
        //                 type: 'symbol',
        //                 source: 'geojson',
        //                 layout: {
        //                     'icon-image': 'point1',
        //                     'icon-size': 0.2,
        //                 },
        //             })
        //         })
        //     })
        //     // 更新位置的方法
        //     this.updata = function () {
        //         let data = this.createDot([this.transPosition[0], this.transPosition[1]]).data
        //         // console.log(map.getSource('geojson'))
        //         if (map.getSource('geojson')) {
        //             map.getSource('geojson').setData(data)
        //         }
        //         // map.bearing = 100
        //         map.rotateTo(((this.transPosition[2] * 180) / 3.1415926 - 90) % 360, { duration: 0 })
        //         // map.flyTo(this.transPosition[0],this.transPosition[1])
        //     }
        // },


        // 返回json格式
        createDot(center) {
            var coords = {
                latitude: center[1],
                longitude: center[0],
            }

            var ret = []
            ret.push([coords.longitude, coords.latitude])
            ret.push(ret[0])

            return {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [
                        {
                            type: 'Feature',
                            geometry: {
                                type: 'Point',
                                coordinates: ret[0],
                            },
                        },
                    ],
                },
            }
        },
    },
    watch: {
        transPosition(n, o) {
            if (o != '') {
                this.updata()
            }
        },
        mapFlag(n,o){
            this.initmap(n)
            // if(n==99){
            //     this.initmap()
            // }else if(n==1){
            //     this.initmap1()
            // }else if(n==2){
            //     this.initmap2()
            // }else if(n==3){
            //     this.initmap3()
            // }
        }
    },
}
</script>

<style>
.left {
    position: absolute;
    bottom: 0;
    left: -3.7rem;
    font-size: none;
    width: 3.7rem;
    height: 100%;
    z-index: 99;
}
.left img {
    width: 100%;
    height: 100%;
}
#map {
    height: 100%;
    width: 26.3rem;
    opacity: 0.6;
    border: none;
}
.mapboxgl-ctrl {
    display: none !important;
}
</style>
